<template>
  <!-- 创建编辑新考试 -->
  <el-dialog
    :title="editbatch ? '批量添加模板' : '编辑模板'"
    width="600px"
    :visible.sync="addModelshow"
    :before-close="handleClose"
    class="addExamContent"
  >
    <el-form :model="form" ref="formRef">
      <ul>
        <li>
          <span>绑定考试</span>
          <div class="inputBox">
            <el-form-item prop="nav6id">
              <el-select
                v-model="selectedValue"
                :multiple="editbatch"
                placeholder="请选择考试"
              >
                <el-option
                  v-for="item in bindexamdata"
                  :key="'ks'+item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </li>
        <li>
          <span>考号类型<i>*</i></span>
          <div class="inputBox">
            <el-select
              v-model="form.examNumberType"
              placeholder="请选择考试类型"
            >
              <el-option
                v-for="item in dict.type.exam_number_type"
                :key="'kh'+item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </li>
        <li>
          <span>考号位数<i>*</i></span>
          <div class="inputBox">
            <el-select
              v-model="form.examNumberDigits"
              placeholder="请选择考号位数"
            >
              <el-option
                v-for="item in examnumberlist"
                :key="'ws'+item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </li>
      </ul>
      <div class="groupbutton">
        <el-button type="primary" @click="surebc">保存</el-button>
        <el-button type="primary" @click="goback">返回</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
// import {createModelAdd,getsubjectnavsix} from '../../api/api.js'
import { createModel, edittemplate } from "../../api/paperinfo/paperinfo.js";
export default {
  dicts: ["exam_number_type"],
  props: [
    "addModelshow",
    "examobj",
    "addexamtype",
    "editbatch",
    "bindexamdata",
    "exammodelid",
    "projectId",
  ],
  data() {
    return {
      examid: "",
      examnumber: 10,
      examnumberlist: [
        4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
      ],
      examVoList: [],
      examVoListstrign: 1,
      form: {
        examVoList: [],
        examNumberType: "",
        examNumberDigits: 10,
        id: "",
      },
      // 表单验证规则
      rules: {
        examVoList: [
          { required: true, message: "请选择考试", trigger: "change" },
        ],
        examNumberType: [
          { required: true, message: "请选择考号类型", trigger: "change" },
        ],
        examNumberDigits: [
          { required: true, message: "请选择考号位数", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    if (!this.editbatch) {
      this.editbatchmodel();
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.editbatch ? this.examVoList : this.examVoListstrign;
      },
      set(value) {
        if (this.editbatch) {
          this.examVoList = value;
        } else {
          this.examVoListstrign = value;
        }
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit("addModelclick", false);
    },
    //获取编辑内容
    async editbatchmodel() {
      try {
        // 检查是否有有效的 exammodelid
        if (!this.exammodelid) {
          console.error("缺少 exammodelid");
          return;
        }

        // 发送请求并等待响应
        const response = await edittemplate(this.exammodelid);
        console.info("response", response);
        // 通常删除成功返回 204 No Content，response 可能为空
        // 可以根据你的 API 实际返回结构调整
        if (response.code === 200) {
          // 假设成功返回 code:200
          // 这里可以添加后续逻辑，如刷新列表等
          this.form.examNumberType = response.data.examNumberType;
          this.selectedValue = response.data.examId;
          this.form.examNumberDigits = response.data.examNumberDigits
          this.examid = response.data.id;
        } else {
          this.$message.error(response.msg);
        }
      } catch (error) {
        console.error("请求出错:", error);
        this.$message.error("删除操作失败，请检查网络或联系管理员");
      }
    },
    filterMethod(query) {
      this.searchQuery = query;
      this.filteredOptions = this.examclassify.filter((item) =>
        item.name.toLowerCase().includes(query.toLowerCase())
      );
    },
    goback() {
      this.$emit("addModelclick", false);
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 验证通过
          this.surebc();
        } else {
          return false;
        }
      });
    },
    surebc() {
      if (this.selectedValue.length == 0) {
        this.$message.error("请选择考试");
        return false;
      }
      if (this.form.examNumberType == "") {
        this.$message.error("请填写考试类型");
        return false;
      }
      if (this.editbatch) {
        this.form.id = undefined;
        this.form.examVoList = this.bindexamdata
          .filter((row) => this.examVoList.includes(row.id)) // 只保留匹配的 id
          .map((row) => ({
            name: row.name, // 提取 subjectName
            id: row.id,
            projectId: this.projectId, // 提取 id
          }));
      } else {
        this.form.id = this.examid ? this.examid : undefined;
        let objarray = this.bindexamdata.filter(
          (row) => row.id == this.selectedValue
        ); // 只保留匹配的 id
        console.info("objarray", objarray);
        this.form.examVoList = objarray.map((item) => {
          return {
            id: item.id,
            name: item.name,
            projectId: this.projectId,
          };
        });
      }
      createModel(this.form).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.$emit("addModelclick", false);
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.addExamMain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 100;
}
.addExamContent h3 {
  font-size: 18px;
  padding-bottom: 20px;
}
.addExamContent ul {
  padding-left: 0 !important;
}
.addExamContent ul li {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  font-size: 14px;
}
.addExamContent ul li span {
  font-size: 14px;
  width: 70px;
  color: #557292;
  text-align: right;
  margin-right: 15px;
  display: inline-block;
}
.addExamContent ul li span i {
  color: #ec555a;
}
.addExamContent ul li p {
  position: relative;
}
.addExamContent ul li p em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #c0c4cc;
  cursor: pointer;
}
.addExamContent ul li >>> .el-input__inner {
  width: 400px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid #d8e4f0;
}
.inputBox {
  width: 400px;
}
.inputBox1 {
  width: 300px;
}
.addExamContent ul li div.inputBox1 >>> .el-input__inner {
  width: 300px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
}
.addExamContent ul li >>> .el-range__icon {
  line-height: 27px;
}
.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.groupbutton >>> .el-button {
  width: 124px;
  height: 34px;
  background: #295cff;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  padding: 0;
}
.groupbutton >>> .el-button:last-child {
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #295cff;
  color: #295cff;
  margin-left: 24px;
}
.bcontentcolor {
  font-size: 14px;
  color: #295cff;
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
}
.el-checkbox {
  margin-right: 8px;
}
.infosetcontentfont {
  color: #5b6371;
}
.addExamContent ul li.infosetcontentfont span {
  width: auto;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #d8e4f0;
  color: #b3b8c2;
  font-size: 14px;
  text-align: left;
  line-height: 26px;
  padding: 0 16px 0 10px;
  margin-left: 10px;
}
.addExamContent ul li.infosetcontentfont i {
  font-style: normal;
  color: #295cff;
  padding: 0 4px;
}
.addExamContent >>> .distpicker-address-wrapper select {
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  color: #999;
}
.inputBox1 >>> .el-tag.el-tag--info {
  background: #f2f6fb;
  border: 1px solid #d8e4f0;
  color: #b3b8c2;
}
.inputBox1 >>> .el-select .el-tag__close.el-icon-close {
  background: none;
  color: #b3b8c2;
}
.inputBox >>> .distpicker-address-wrapper select {
  border-radius: 10px;
  height: 35px;
  font-size: 16px;
  line-height: 35px;
  border: 1px solid #d8e4f0;
  color: #606266;
  padding: 0 10px;
}
.addExamContent >>> .el-form-item {
  margin: 0;
}
</style>